{% extends "base.html" %}
{% comment %}
<!--
  Copyright (C) 2008 ZHENG Zhong <heavyzheng nospam-at gmail D0T com>
  - http://www.zhengzhong.net/
  - http://blog.zhengzhong.net/

  The Google datastore based file repository.
  
  Created on 2008-10-23.
  $Id: file.html 310 2008-12-30 13:28:29Z heavyzheng $
-->
{% endcomment %}

{#------------------------------------------------------------------------------------------------#}

{% block html_head %}

<title>File Repository</title>
<link rel="stylesheet" type="text/css" media="screen,print" href="{{ static_ }}/stylesheets/file.css"/>

<script type="text/javascript">//<![CDATA[
  
/* Message toggle. */

function closeMessage() {
    $(".message").hide("slow");
}

/* File information toggle. */

function toggleFileInfo(id) {
    $("#" + id + " .file-info-body").toggle("slow");
}

/* edit-form and delete-form. */

function showEditForm(id) {
    $("#" + id + " .form-toggle").hide();
    $("#" + id + " .delete-form").hide()
    $("#" + id + " .edit-form"  ).show("slow");
}

function submitEditForm(id) {
    $("#" + id + " .edit-form :button").attr("disabled", "disabled");
    $("#" + id + " .edit-form").submit();
}

function showDeleteForm(id) {
    $("#" + id + " .form-toggle").hide();
    $("#" + id + " .edit-form"  ).hide()
    $("#" + id + " .delete-form").show("slow");
}

function submitDeleteForm(id) {
    $("#" + id + " .delete-form :button").attr("disabled", "disabled");
    $("#" + id + " .delete-form").submit();
}

function cancelFileAction(id) {
    $("#" + id + " .edit-form"  ).hide();
    $("#" + id + " .delete-form").hide();
    $("#" + id + " .form-toggle").show("slow");
}

/* upload-form. */

function showUploadForm() {
    $("#upload .form-toggle").hide();
    $("#upload .upload-form").show("slow");
}

function hideUploadForm() {
    $("#upload .upload-form").hide();
    $("#upload .form-toggle").show("slow");
}

function submitUploadForm() {
    $("#upload .upload-form :button").attr("disabled", "disabled");
    $("#upload .upload-form").submit();
}

//]]></script>

{% endblock %}{# html_head #}

{#------------------------------------------------------------------------------------------------#}

{% block header %}
<h1>File Repository</h1>
{% endblock %}{# header #}

{#------------------------------------------------------------------------------------------------#}

{% block sidebar-and-content %}
      
{% if error %}
  <div class="error message">
    {{ error }}
    <a href="javascript:void(0);" onclick="closeMessage();">[close]</a>
  </div>
{% endif %}

{% if info %}
  <div class="info message">
    {{ info }}
    <a href="javascript:void(0);" onclick="closeMessage();">[close]</a>
  </div>
{% endif %}

{% if tag %}
  <div class="file-tag">
    Files tagged with "<b>{{ tag }}</b>"...
  </div>
{% endif %}

{% for file in files %}

  <div id="{{ file.key.id }}" class="file section">
  
    <!-- File information -->
    
    <div class="file-info">
      <div class="file-info-head">
        <a href="javascript:void(0);" onclick="toggleFileInfo('{{ file.key.id }}');">File Information:</a>
      </div>
      <div class="file-info-body hidden">
        <ul>
          <li>datastore ID: {{ file.key.id }}</li>
          <li>mime-type: {{ file.mime_type }}</li>
          <li>size: {{ file.size }}</li>
          <li>owner: {{ file.owner.nickname }}</li>
          <li>uploaded at {{ file.upload_date|date:"Y-m-d h:i:s A" }}</li>
          <li>downloaded {{ file.downloads }} times</li>
        </ul>
      </div>
    </div><!--/.file-info-->
    
    <div class="file-name">
      <a href="{{ url_ }}/file/{{ file.key.id }}/">{{ file.name|escape }}</a>
    </div><!--/.file-name-->
    
    <div class="file-desc">
      {% if file.desc %}
        {{ file.desc|escape }}
      {% else %}
        <i>This file has no description.</i>
      {% endif %}
    </div><!--/.file-desc-->
    
    <div class="file-footer">
      {% if file.md5 %}
        MD5: <code>{{ file.md5 }}</code>
        <br/>
      {% endif %}
      {% if file.tags %}
        Tags:
        {% for tag in file.tags %}
          <a href=".?tag={{ tag }}">{{ tag }}</a>
        {% endfor %}
        <br/>
      {% endif %}
    </div><!--/.file-footer-->
    
    <!-- Forms for editing file info and deleting file. -->
    
    {% if is_admin_ %}
    
      <div class="form-toggle">
        <a href="javascript:void(0);" onclick="showEditForm('{{ file.key.id }}');">edit</a>
        |
        <a href="javascript:void(0);" onclick="showDeleteForm('{{ file.key.id }}');">delete</a>
      </div><!--/.form-toggle-->
      
      <form class="edit-form hidden" action="." method="POST">
        <input type="hidden" name="action" value="edit"/>
        <input type="hidden" name="id" value="{{ file.key.id }}"/>
        <table>
          <tr>
            <td width="1%" class="nowrap">Rename to:</td>
            <td><input type="text" name="name" value="{{ file.name }}" size="40"/></td>
          </tr>
          <tr>
            <td width="1%" class="nowrap">Description:</td>
            <td><input type="text" name="desc" value="{{ file.desc|default:"" }}" size="40"/></td>
          </tr>
          <tr>
            <td width="1%" class="nowrap">MD5:</td>
            <td><input type="text" name="md5" value="{{ file.md5|default:"" }}" size="40"/></td>
          </tr>
          <tr>
            <td width="1%" class="nowrap">Tags:</td>
            <td><input type="text" name="tags" value="{{ file.tags_str }}" size="40"/></td>
          </tr>
          <tr>
            <td></td>
            <td class="nowrap">
              <input type="button" name="update" value="Update" onclick="submitEditForm('{{ file.key.id }}');"/>
              <input type="button" name="cancel" value="Cancel" onclick="cancelFileAction('{{ file.key.id }}');"/>
            </td>
          </tr>
        </table>
      </form><!--/.edit-form-->

      <form class="delete-form hidden" action="." method="POST">
        <input type="hidden" name="action" value="delete"/>
        <input type="hidden" name="id" value="{{ file.key.id }}"/>
        <p>Are you sure you want to delete this file?</p>
        <p>
          <input type="button" name="delete" value="Yes, delete it!" onclick="submitDeleteForm('{{ file.key.id }}');"/>
          <input type="button" name="cancel" value="No, keep it." onclick="cancelFileAction('{{ file.key.id }}');"/>
        </p>
      </form><!--/.delete-form-->
    
    {% endif %}{# is_admin_ #}
  
  </div><!--/#{{ file.key.id }}-->

{% endfor %}

{% if is_admin_ %}

  <div id="upload" class="section">
  
    <div class="form-toggle">
      <a href="javascript:void(0);" onclick="showUploadForm();">upload a file</a>
    </div>
    
    <form class="upload-form hidden" action="." method="POST" enctype="multipart/form-data">
      <input type="hidden" name="action" value="upload"/>
      <table>
        <tr>
          <td width="1%" class="nowrap">File:</td>
          <td><input type="file" name="file" size="40"/></td>
        </tr>
        <tr>
          <td width="1%" class="nowrap">Description:</td>
          <td><input type="text" name="desc" size="40"/></td>
        </tr>
        <tr>
          <td width="1%" class="nowrap">MD5:</td>
          <td><input type="text" name="md5" size="40"/></td>
        </tr>
        <tr>
          <td width="1%" class="nowrap">Tags:</td>
          <td><input type="text" name="tags" size="40"/></td>
        </tr>
        <tr>
          <td></td>
          <td class="nowrap">
            <input type="button" name="upload" value="Upload" onclick="submitUploadForm();"/>
            <input type="button" name="cancel" value="Cancel" onclick="hideUploadForm();"/>
          </td>
        </tr>
      </table>
    </form><!--/.upload-form-->
  
  </div><!--/#upload-->

{% endif %}{# is_admin_ #}

{% endblock %}{# sidebar-and-content #}



